<template>
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      action="false"
      accept=".mp4"
      ref="uploadref"
      :auto-upload="false"
      :before-upload="beforeUpload"
      :on-change="handleImgChange"
      :on-remove="handleRemove"
      :limit="1"
      :file-list="imglist"
      :on-exceed="handleExceed"
    >
      <template #tip v-if="tip">
        <div class="el-upload__tip">
          {{ tip }}
        </div>
      </template>
      <el-button type="primary">附件上传</el-button>
      <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
    </el-upload>
    <el-dialog
      v-model="imgdialogVisible"
      width="600px"
      append-to-body
      class="uploadimgDialog"
    >
      <img style="width: 500px; height: 500px" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { defineEmits, defineProps, ref } from "vue";
const emit = defineEmits(["file-uploaded", "file-remove"]);
const props = defineProps({
  tip: {
    type: String,
    default: "",
  },
  uploadId: {
    type: Number,
  },
  imglist: {
    type: Array,
    default: () => [],
  },
});

const uploadref = ref(null);
const handleImgChange = (uploadFile, uploadFiles) => {
  console.log(uploadFile.raw.type);
  //限制只允许mp4 w文件
  if (uploadFile.raw.type !== "video/mp4") {
    ElMessage.error("上传视频只能是 mp4 格式!");
    uploadref.value.clearFiles();
    return false;
  }
  emit("file-uploaded", {
    uploadId: props.uploadId,
    fileData: uploadFiles,
  });
};
const handleRemove = (file, fileList) => {
  emit("file-remove", {
    uploadId: props.uploadId,
    fileData: file,
    fileList: fileList,
  });
};

let imgdialogVisible = ref(false);
let dialogImageUrl = ref("");
const handlePreview = (file) => {
  imgdialogVisible.value = true;
  dialogImageUrl.value = file.url;
};
//图片上传限制大小
//文件长度限制
const handleExceed = (files, fileList) => {
  ElMessage.error(`当前限制选择 1 个文件`);
  return false;
};
</script>

<style scoped>
:deep(.el-upload-list__item) {
  width: 400px;
}
</style>
